<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Ta的博客</title>

    <!-- Bootstrap -->
    <link href="./css/bootstrap.css" rel="stylesheet">

</head>
<body style="background-color: #f8f8f8;">
<div th:replace="~{commons::navbar('dashboard')}"></div>

<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1 col-sm-12">
            <div style="width: 100%;height: 270px;border-radius: 5px;background: white;box-shadow: 0 1px 3px rgba(18,18,18,.1);">
                <div style="background-color: lightblue;height: 132px;border-top-left-radius: 5px;border-top-right-radius: 5px">
                    <img th:src="${avatar}" style="margin-left: 20px;margin-top: 52px;" class="img-rounded" width="160"
                         height="160" alt="">
                </div>
                <div style="background-color: white;height: 132px;border-bottom-right-radius:5px;
                border-bottom-left-radius:5px;">
                    <h2 th:text="${name}"
                        style="font-weight: bold;margin-left:200px;margin-top:10px;font-family:  'Arial','Microsoft YaHei','黑体','宋体',sans-serif;"></h2>
                    <p th:text="${introduction}" style="margin-left:200px;">中国地质大学（武汉）软件工程</p>
                    <div class="text-right">
                        <button class="btn" th:if="${session.get('user')!=null&&session.get('user').id==uid}"
                                style="margin-right: 20px;color: white;background-color: #0084ff;"
                                data-toggle="collapse" data-target="#collapseExample" aria-expanded="false"
                                aria-controls="collapseExample">
                            编辑资料
                        </button>
                        <button th:text="${guanzhule?'取消关注':'关注'}" id="abc"
                                th:onclick="'javascript:guanzhuhanshu('+${uid}+',this);'" class="btn"
                                style="color: white;background-color: #0084ff;margin-right: 20px">
                            关注Ta
                        </button>
                    </div>

                </div>
            </div>
            <br>
        </div>
    </div>
</div>
<!--编辑资料的表单-->
<div class="container">
    <div class="col-md-10 col-md-offset-1 col-sm-12"
         style="border-radius: 5px;background: white;box-shadow: 0 1px 3px rgba(18,18,18,.1);margin-bottom: 20px">
        <div class="collapse" id="collapseExample">
            <div class="text-right">
                <form class="form-signin" th:action="@{/user/personal}" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label style="line-height: 34px" for="inputPassword"
                               class="col-sm-offset-5 col-sm-2 control-label">修改昵称：</label>
                        <div class="col-sm-4">
                            <input name="name" type="text" class="form-control" id="inputPassword" th:value="${name}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label style="line-height: 34px" for="inputPassword"
                               class="col-sm-offset-5 col-sm-2 control-label">个人简介：</label>
                        <div class="col-sm-4">
                            <input name="introduction" type="text" class="form-control" id="inputPassword"
                                   th:value="${introduction}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label style="line-height: 34px" for="exampleInputFile"
                               class="col-sm-offset-5 col-sm-2 control-label">上传头像：</label>
                        <div class="col-sm-4">
                            <input type="file" name="file" id="exampleInputFile">
                        </div>
                    </div>
                    <button class="btn btn-primary" style="margin-top: 1em;color: white;background-color: #0084ff;"
                            type="submit">提交
                    </button>
                </form>
            </div>

        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="col-lg-9 col-md-9 col-sm-9 col-xm-9"
                 style="background: white;border-radius: 5px;box-shadow: 0 1px 3px rgba(18,18,18,.1);">
                <!--文章-->
                <div th:each="article:${articles}" class="row"
                     style="margin-top: 10px;margin-left: 20px;margin-right: 15px;margin-bottom: 10px;">

                    <a th:href="@{/detail(id=${article.getId()})}" style="text-decoration-line: none;">
                        <h3 th:text="${article.getTitle()}"
                            style="opacity: 0.95;color: #121212;font-weight: bold;font-family: 'Microsoft YaHei',sans-serif;">
                            Spring：没有人比我更懂Java对象的创建！
                        </h3>
                    </a>
                    <!--<div class="container">
                        <p class="visible-xs img-responsive">小屏可见</p>
                        <p  class="hidden-xs img-responsive">大屏可见</p>
                    </div>-->
                    <!--大屏显示附带图片的文章-->
                    <div class="hidden-xs img-responsive" th:if="${!#strings.isEmpty(article.getImage())}"
                         style="font-size: 15px;display: flex;">
                        <div>
                            <img th:src="${article.getImage()}" height="105px" width="190px" alt="">
                        </div>
                        <div style="margin-left: 15px">
                            <a th:href="@{/manage(uid=${article.getUid()})}" th:text="${name}">java灬小不点</a>：
                            <a th:href="@{/detail(id=${article.getId()})}" th:text="${article.getContent()}"
                               style="letter-spacing: 1px;text-decoration: none;color: black">一、开篇一问 一个Spring
                                Bean是Java对象吗？
                                那么一个对象是Spring Bean吗？ 带着这个问题我们一起来回顾Spring…</a>
                            <a th:href="@{/detail(id=${article.getId()})}">阅读全文​</a>
                        </div>
                    </div>

                    <!--小屏显示附带图片的文章-->
                    <div class="visible-xs img-responsive" th:if="${!#strings.isEmpty(article.getImage())}"
                         style="font-size: 15px;">
                        <div>
                            <img th:src="${article.getImage()}" width="100%" alt="">
                        </div>
                        <div style="margin-left: 15px">
                            <a th:href="@{/manage(uid=${article.getUid()})}" th:text="${name}">java灬小不点</a>：
                            <a th:href="@{/detail(id=${article.getId()})}" th:text="${article.getContent()}"
                               style="text-decoration: none;color: black">一、开篇一问 一个Spring Bean是Java对象吗？
                                那么一个对象是Spring Bean吗？ 带着这个问题我们一起来回顾Spring…</a>
                            <a th:href="@{/detail(id=${article.getId()})}">阅读全文​</a>
                        </div>
                    </div>

                    <!--大小屏无照片-->
                    <div th:if="${#strings.isEmpty(article.getImage())}" style="font-size: 16px;">
                        <a th:href="@{/manage(uid=${article.getUid()})}" th:text="${name}">java灬小不点</a>：
                        <a th:href="@{/detail(id=${article.getId()})}" th:text="${article.getContent()}"
                           style="text-decoration: none;color: black">一、开篇一问 一个Spring Bean是Java对象吗？
                            那么一个对象是Spring Bean吗？ 带着这个问题我们一起来回顾Spring…</a>
                        <a th:href="@{/detail(id=${article.getId()})}">阅读全文​</a>
                    </div>
                    <div class="row" style="margin-top: 20px">
                        <button th:onclick="'javascript:agree('+${article.getId()}+',this);'" type="button"
                                class="btn btn-default btn-sm" style="color: #0084ff;">
                            <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> <span
                                th:text="'赞同'+${article.getAgree()}"></span>
                        </button>

                        <a th:href="@{/detail#a1(id=${article.getId()})}" class="btn btn-link btn-sm"
                           style="color: #8590a6;">
                            <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 添加评论
                        </a>
                        <button th:id="${'star'+article.getId()}"
                                th:onclick="'javascript:star('+${article.getId()}+',this);'" class="btn btn-link btn-sm"
                                style="color: #8590a6;">
                            <span th:if="${!article.isStar}" class="glyphicon glyphicon-star" aria-hidden="true"></span>
                            <span th:if="${!article.isStar}">收藏</span>
                            <span th:if="${article.isStar}" style="color: #0084ff" class="glyphicon glyphicon-star"
                                  aria-hidden="true"></span> <span th:if="${article.isStar}"
                                                                   style="color: #0084ff">收藏</span>
                        </button>

                        <button th:id="${'agree'+article.getId()}"
                                th:onclick="'javascript:agree('+${article.getId()}+',this);'"
                                class="btn btn-link btn-sm" style="color: #8590a6;">
                            <span th:if="${!article.isAgree}" class="glyphicon glyphicon-heart"
                                  aria-hidden="true"></span> <span th:if="${!article.isAgree}">喜欢</span>
                            <span th:if="${article.isAgree}" style="color: #0084ff" class="glyphicon glyphicon-heart"
                                  aria-hidden="true"></span> <span th:if="${article.isAgree}"
                                                                   style="color: #0084ff">喜欢</span>
                        </button>
                        <span th:if="${session.get('user')!=null&&session.get('user').id==article.getUid()}"
                              class="dropdown">
                            <button style="border: none" class="btn btn-default dropdown-toggle" type="button"
                                    id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li><a th:href="@{/user/addArticle(id=${article.getId()})}">编辑</a></li>
                                <li><a id="delete"
                                       th:href="@{/user/deleteArticle2(id=${article.getId()},location='manage')}">删除</a></li>
                            </ul>
                        </span>
                    </div>
                    <hr>
                </div>

                <!--上下页-->
                <div style="margin-top: 20px">
                    <div style="text-align: center">
                        <a th:href="@{/manage(id=${articlePage.current-1},uid=${uid})}"
                           th:if="${articlePage.current!=1}"
                           type="button"
                           class="btn" style="background-color: #0084ff;color: white">
                            <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> 上一页
                        </a>
                        <a th:href="@{/manage(id=${articlePage.current+1},uid=${uid})}"
                           th:if="${articlePage.current!=articlePage.pages}"
                           type="button" class="btn" style="background-color: #0084ff;color: white">
                            <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> 下一页
                        </a>
                    </div>
                </div>
                <br>
                <br>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xm-3  hidden-xs ">
                <div th:if="${session.get('user')!=null&&session.get('user').id==uid}" class="box"
                     style="padding: 10px 10px 10px 10px;background: white;border-radius: 5px;box-shadow: 0 1px 3px rgba(18,18,18,.1);">
                    <h4 style="font-size: 13px;color: #2b80ff;margin-left: 5px">我的小框框</h4>
                    <div style="height: 74px;width: 100%;display: flex">
                        <div class="text-center" style="width: 50%;box-shadow: 0 1px 5px rgba(18,18,18,.1);">
                            获得点赞
                            <h3 th:text="${dianzanshu}" style="font-weight: bold">18</h3>
                        </div>
                        <div class="text-center" style="width: 50%;box-shadow: 0 1px 5px rgba(18,18,18,.1);">
                            获得关注
                            <h3 th:text="${guanzhushu}" style="font-weight: bold">23</h3>
                        </div>
                    </div>
                    <br>
                    <div class="list-group">
                        <a href="#" class="list-group-item">我的关注</a>
                        <a href="#" class="list-group-item">我的收藏</a>
                    </div>
                </div>
                <div th:if="${session.get('user')==null||session.get('user').id!=uid}" class="box"
                     style="padding: 10px 10px 10px 10px;background: white;border-radius: 5px;box-shadow: 0 1px 3px rgba(18,18,18,.1);">
                    <h4 style="font-size: 13px;color: #2b80ff;margin-left: 5px">Ta 的小框框</h4>
                    <div style="height: 74px;width: 100%;display: flex">
                        <div class="text-center" style="width: 50%;box-shadow: 0 1px 5px rgba(18,18,18,.1);">
                            获得点赞
                            <h3 th:text="${dianzanshu}" style="font-weight: bold">18</h3>
                        </div>
                        <div class="text-center" style="width: 50%;box-shadow: 0 1px 5px rgba(18,18,18,.1);">
                            获得关注
                            <h3 th:text="${guanzhushu}" style="font-weight: bold">23</h3>
                        </div>
                    </div>
                    <br>
                </div>
            </div>
        </div>

    </div>

</div>
<br>
<br>
<footer class="text-center" style="width: 100%;
            height: 40px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(18,18,18,.1);
            color: black">
    备案/许可证编号为：鄂ICP备2020018205号 <br>
    Copyright@2020-2020MinXuDesigened by MinXu
</footer>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./js/bootstrap.js"></script>
<script th:inline="javascript">

    window.onload = function () {
        var bt = document.getElementById("delete");
        bt.onclick = function () {
            if (confirm("真的要删除吗?")) {
                return true;
            } else {
                return false;
            }
        }
    }

    function guanzhuhanshu(id) {
        var user = '[[${session.user}]]';
        let str = JSON.stringify(user);
        // console.log(str)
        // console.log(str.length)
        // console.log(str.length === 6)
        if (str.length === 6) {
            alert("请先登录");
            return;
        }
        var blogJson = eval("(" + user + ")");//blos就是你的json数据
        console.log(blogJson);

        console.log(blogJson.id);


        console.log(blogJson.id === id);
        if (blogJson.id === id) {
            alert("不能关注自己");
            return;
        }
        $.ajax({
            type: "get",
            url: "/attention",
            data: {uid: id},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log("关注成功");
                    document.getElementById("abc").innerText = "取消关注"
                } else {
                    console.log("关注失败");
                    document.getElementById("abc").innerText = "关注"
                }
            }
        });
    }

    function star(id) {
        console.log(id);
        var user = '[[${session.user}]]';
        let str = JSON.stringify(user);
        console.log(str)
        console.log(str.length)
        console.log(str.length === 6)
        if (str.length === 6) {
            alert("请先登录");
            return;
        }
        $.ajax({
            type: "get",
            url: "/star",
            data: {aid: id},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log("收藏成功");
                    console.log("star" + id);
                    document.getElementById("star" + id).innerHTML = "<span style=\"color: #0084ff\" class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span> <span style=\"color: #0084ff\">收藏</span>"
                } else {
                    console.log("收藏失败");
                    document.getElementById("star" + id).innerHTML = "<span class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span> <span>收藏</span>"
                }
            }
        });
    }

    function agree(id) {
        console.log(id);
        var user = '[[${session.user}]]';
        let str = JSON.stringify(user);
        if (str.length === 6) {
            alert("请先登录");
            return;
        }
        $.ajax({
            type: "get",
            url: "/agree",
            data: {aid: id},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log("点赞成功");
                    console.log("agree" + id);
                    document.getElementById("agree" + id).innerHTML = "<span style=\"color: #0084ff\" class=\"glyphicon glyphicon-heart\" aria-hidden=\"true\"></span> <span style=\"color: #0084ff\">喜欢</span>"
                } else {
                    console.log("点赞失败");
                    document.getElementById("agree" + id).innerHTML = "<span class=\"glyphicon glyphicon-heart\" aria-hidden=\"true\"></span> <span>喜欢</span>"
                }
            }
        });
    }
</script>
</body>
</html>